/* ChatPrivate组件样式 */
.private-chat-container {
  display: flex;
  height: calc(100vh - 100px);
  padding: 16px;
  gap: 16px;
  margin-top: 20px;
}

.user-list {
  height: 100%;
  width: 280px;
  background: white;
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  padding: 8px 0;
  overflow-y: auto;
}

.dark-mode .user-list {
  background: #717175;
  box-shadow: 3px -1px 8px 0 rgb(255, 255, 255);
}

.user-item {
  display: flex;
  align-items: center;
  padding: 12px 16px;
  cursor: pointer;
  transition: all 0.3s ease;
  border-bottom: 1px solid #f0f0f0;
  position: relative; /* 新增定位上下文 */
}

.dark-mode .user-item {
  display: flex;
  align-items: center;
  padding: 12px 16px;
  cursor: pointer;
  transition: all 0.3s ease;
  border-bottom: 1px solid #8b8787;
  position: relative; /* 新增定位上下文 */
}
/* 优化激活状态样式 */
.user-item.active {
  background: #f5f8ff; /* 使用与工程主色调匹配的浅蓝色 */
  border-left: 3px solid #0071e3; /* 与登录按钮颜色一致 */
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 113, 227, 0.1); /* 新增投影增强层次感 */
}

.dark-mode .user-item.active {
  background: #9c9ea3; 
  border-left: 3px solid #0071e3; 
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 113, 227, 0.1);
  color: #fffcfc;
}

/* 补充暗黑模式文字颜色定义 */
.dark-mode .user-item .username {
  color: #ffffff;  /* 显式定义用户名颜色 */
}

/* 新增激活态指示器动画 */
.user-item.active::after {
  content: '';
  position: absolute;
  left: -3px;
  top: 0;
  height: 100%;
  width: 3px;
  background: #0071e3;
  animation: indicatorSlide 0.3s ease;
}

@keyframes indicatorSlide {
  from { transform: translateY(-10px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

.user-item:hover {
  background: #f5f7fa;
}

.dark-mode .user-item:hover {
  background: #b7b9bd;
}

.user-item .avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, #007AFF, #00a8ff);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 12px;
  font-weight: 500;
}

.user-item .username {
  font-size: 14px;
  color: #333;
  font-weight: 500;
}

.chat-area {
  flex: 1;
  display: flex;
  flex-direction: column;
  height: 100%; /* 使用100%高度 */
  background: #f0f2f5;
  border-radius: 12px; /* 添加圆角 */
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08); /* 添加阴影 */
  overflow: hidden; /* 确保内部元素圆角不溢出 */
}

.dark-mode .chat-area {
  box-shadow: 3px -1px 8px 0 rgb(255, 255, 255); 
}

.message-area {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
  background: #f0f2f5;
  height: calc(100% - 70px); /* 减去输入框高度 */
}

.dark-mode .message-area {
  background: #707072;
}

.message-bubble {
  max-width: 70%;
  margin: 12px 0;
  padding: 14px 18px;
  border-radius: 18px;
  background: white;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease;
}

.dark-mode .message-bubble {
  color: #ffffff;
  background: #717175;
  box-shadow: 0 2px 6px rgb(255, 255, 255);
}


.message-bubble:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.input-area {
  padding: 16px 20px;
  background: white;
  border-top: 1px solid #e8e8e8;
  box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.03);
  position: sticky;
  bottom: 0;
}


.el-input__inner {
  max-width: 60vw;
  width: 60vw;
}

.dark-mode .input-area {
  background: #707072;
  border-top: 1px solid #979292;
  box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.03);

}

.time {
  font-size: 12px;
  color: #999;
  padding-left: 10px;
}

.sender {
  font-weight: 600;
  color: #333;
  margin-right: 8px;
}

.dark-mode .sender {
  color: #ffffff;
}

/* 添加响应式样式 */
@media (max-width: 768px) {
  .private-chat-container {
    flex-direction: row;
  }
  
  .user-list {
    width: 60px;
    padding: 8px 0;
  }
  
  .user-item {
    flex-direction: column;
    align-items: center;
    padding: 8px 4px;
  }
  
  .username {
    display: none;
  }
  
  .chat-area {
    width: calc(100% - 60px);
  }
}